import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

/* 3 - State & Lifecycle */
/* State & 生命周期 */

// 类定义的组件可以使用state/生命周期..
// state与props类似, 但是state是私有的, 并且完全受控于当前组件
// 利用state使渲染clock组件时不需要传参, 只要渲染<Clock />, 就有一个Clock组件的class实例被创建使用
// state是向下流动的, 任何state总属于特定的组件, 该state派生的任何数据/UI只能影响DOM树中低于他们的组件

class Clock extends React.Component {
    // class组件始终使用props参数来调用构造函数
    constructor(props) {
        super(props);
        // 初始化state
        this.state = { date: new Date() };
    }

    // 生命周期方法 - 设置定时器
    // 组件第一次被渲染到DOM中时, 设置一个计时器, 叫做 - 挂载(mount)
    // DOM中删除Clock组件时, 清除定时器, 叫做 - 卸载(unmount)
    componentDidMount() {
        // componentDidMount在组件已经被渲染到DOM后运行, 所以在此设置计时器
        // render方法被调用, Clock的输出插入DOM后, react调用ComponentDidMount生命周期方法
        this.timerID = setInterval(() => this.tick(), 1000);
    }
    componentWillMount() {
        // 在componentWillMount中清除计时器
        clearInterval(this.timerID);
    }
    // tick方法中设置计时器的工作
    tick() {
        // 调用tick时更新date值
        // 修改this.state不会重新渲染组件, 应该使用setState
        // props和state可能是异步更新的, 不要依赖它们的值来更新下一个状态        this.setState({
        // 需要使用props和state时, 让setState接受一个函数
        // state为第一个参数, props为第二个参数
        // 调用 setState时, 会把你提供的对象合并到当前的state
        this.setState({
            date: new Date()
        });
    }

    render() {
        return (
            <div>
                {/* <h1>Its's {this.props.date.toLocaleTimeString()}.</h1> */}
                <h1>It's {this.state.date.toLocaleTimeString()}.</h1>
            </div>
        );
    }
}

ReactDOM.render(
    <Clock />,
    document.getElementById('root')
);

// function tick() {
//     ReactDOM.render(
//         <Clock date={new Date()}/>,
//         document.getElementById('root')
//     );
// }
// setInterval(tick, 1000); // 用此方法(props)需要设置计时器, 每秒更新UI